<template>
  <div id="contain">
    <a-button
      v-if="this.isEditCustomer"
      class="u-btn"
      style="background-color: #ff6a00 !important; border-color: #ff6a00; color: #fff"
      type="default"
      @click="addRecord"
      ><a-icon type="add" />新增商机</a-button
    >
    <a-table id="table" :columns="columnsList" :data-source="list" :pagination="false" :scroll="{ y: 400 }">
      <span v-if="isEditCustomer" slot="action" slot-scope="text, index, record">
        <a @click="showRenameItem(record, index)">编辑</a>
        <!-- <a-divider type="vertical" />
        <a @click="showRelItem(record, index)">解除关联</a> -->
        <a-divider type="vertical" />
        <a @click="showDeleteItem(record, index)">删除</a>
      </span>
    </a-table>
    <crm-business-modal v-if="id" ref="business" :customerId="id" @ok="getDetail"></crm-business-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import axios from 'axios'
import CrmBusinessModal from '../../business/modules/CrmBusinessModal.vue'
export default {
  name: 'RelativeBusiness',
  props: {
    /** 模块ID */
    id: [String, Number],
    isEditCustomer: { type: Boolean, default: true },
  },
  data() {
    return {
      showUploadList: false,
      // 重命名
      renameVisible: false,
      uploadText: '上传',
      columnsList: [
        {
          title: '商机名称',
          dataIndex: 'businessName',
          key: 'businessName',
        },
        //{
        //  title: '产品总额',
        //  dataIndex: 'totalPrice',
        //  key: 'totalPrice',
        //  width: 100,
        //},
        // {
        //   title: '商机金额',
        //   dataIndex: 'money',
        //   key: 'money',
        // },
        {
          title: '商机阶段',
          key: 'statusId_dictText',
          dataIndex: 'statusId_dictText',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      befireId: null,
      list: [],
      postParams: {
        customerId: this.id,
      },
      newName: '',
      fileId: '',
      url: {
        pagingCrmBusiness: '/online/api/pagingCrmBusiness',
        deleteCrmBusiness: '/online/upload/deleteCrmBusiness',
        updateCrmBusiness: '/online/upload/updateCrmBusiness',
      },
    }
  },
  components: {
    CrmBusinessModal,
  },
  watch: {
    id: {
      // immediate: true,
      deep: true,
      handler(val) {
        this.list = []
        this.getDetail(val)
      },
    },
  },
  methods: {
    getDetail(id) {
      const params = {}
      params[`customerId`] = id
      getAction(this.url.pagingCrmBusiness, params)
        .then((res) => {
          if (res.success) {
            this.list = res.result.records
          }
        })
        .catch(() => {})
    },
    addRecord() {
      this.$refs['business'].add()
    },
    showRelItem(index, record) {
      const that = this
      record.customerId = ''
      this.$confirm({
        title: '提示',
        content: '您确定要取消关联吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          getAction(that.url.updateCrmBusiness, record).then((res) => {
            if (res.success) {
              that.$message.success('成功！')
              that.getDetail()
            } else {
              that.$error(res.message)
            }
          })
        },
        onCancel() {},
      })
    },
    // 删除操作
    showDeleteItem(index, record) {
      const that = this
      this.$confirm({
        title: '提示',
        content: '您确定要删除吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          getAction(that.url.deleteCrmBusiness, { id: record.id }).then((res) => {
            if (res.success) {
              that.$message.success('成功！')
              that.getDetail()
            } else {
              that.$error(res.message)
            }
          })
        },
        onCancel() {},
      })
    },
    showRenameItem(index, record) {
      this.$refs['business'].edit(record)
    },
  },
}
</script>

<style lang="less" scoped>
#contain {
  position: relative;
  .u-btn {
    position: absolute;
    top: 0;
    right: 0;
  }
  #table {
    position: absolute;
    top: 50px;
  }
}
/deep/ .ant-btn {
  color: #fff;
  background-color: #168a40;
  border-color: #168a40;
}
/deep/ .ant-table {
  border: 1px solid rgb(230, 230, 230);
}
</style>